<template>
    <div class="merchant-list">
        <Card>
            <p slot="title">
                <Icon type="grid"></Icon>
                商户列表
            </p>
            <Row>
                <Input v-model="searchObj.merchantName" placeholder="请输入商户名" style="width: 150px" />
                <Input v-model="searchObj.merchantPerson" placeholder="请输入联系人" style="width: 150px" />
                <Input v-model="searchObj.merchantIphone" placeholder="请输入手机号" style="width: 150px" />
                <span @click="handleSearch" style="margin: 0 10px;">
                    <Button type="primary" icon="search">搜索</Button>
                    <Button type="primary" icon="search" @click="modal = true">高级搜索</Button>
                </span>
            </Row>
            <Row class="row-top">
                <Table :loading="loading" :columns="tableColumns" :data="tableData"  :stripe="true"></Table>
            </Row>
            <Row class="row-top page-layout">
                <Page :total="page.pageTotal" :current="page.pageNum" @on-change="changePage"></Page>
            </Row>
        </Card>
        <Modal
            v-model="modal"
            title="商户列表高级搜索"
            @on-ok="modalOk"
            @on-cancel="modalCancel">
            <FormDynamic :data="formDynamic"> </FormDynamic>
        </Modal>
    </div>
</template>             

<script>

import {searchTable} from '@/mock/merchant/list';
import validatorRule from '@/filters/validator-rule';
import FormDynamic from "@/components/form-dynamic";

export default {
    name: 'merchant-list',
    components: {
        FormDynamic
    },
    data () {
        return {
            searchObj: {
                merchantName:'',
                merchantPerson:'',
                merchantIphone:'',
            },
            page: {
                pageNum:1,
                pageTotal:0,
            },
            tableData: searchTable,
            loading: false,          
            modal: false,
            formDynamic: {
                items: {

                    //账号
                    user: {
                        value: '',
                        label:'用户名',
                        field:'user',
                        status:1, 
                        disabled:false,//0无法使用，必须要false
                        placeholder:'请输入用户名',
                        type:'text',
                        rule: validatorRule.user
                    },

                    //密码
                    password: {
                        value: '',
                        label:'密码',
                        field:'password',
                        status:1,
                        disabled:false,
                        placeholder:'请输入密码',
                        type:'password',
                        rule: validatorRule.password
                    },
                    
                    //身份证正面照片
                    iDCardF: {
                        url:'//jsonplaceholder.typicode.com/posts/',
                        value: '', //返回的url
                        label:'身份证正面照片',
                        field:'iDCardF',
                        status:1,
                        disabled:false,
                        placeholder:'请上传身份证正面照片',
                        type:'file',
                        rule:validatorRule.iDCardF,
                        success:this.iDCardFUploadHandleSuccess,
                        error:this.iDCardFUploadHandleError
                    },

                    //身份证背面照片
                    iDCardB: {
                        url:'//jsonplaceholder.typicode.com/posts/',
                        value: '', //返回的url
                        label:'身份证背面照片',
                        field:'iDCardB',
                        status:1,
                        disabled:false,
                        placeholder:'请上传身份证背面照片',
                        type:'file',
                        rule:validatorRule.iDCardB,
                        success:this.iDCardBUploadHandleSuccess,
                        error:this.iDCardBUploadHandleError
                    },
                    //三级联动 /单选/多选
                },
                ref: "formDynamic",
                labelWidth:120,
            }
        };
    },

    computed: {

        tableColumns : function () {

            let tableColumns = [
                {
                    title: '序号',
                    width: 60,
                    key: 'id'
                },
                {
                    title: '商户名',
                    key: 'merchantName',
                    ellipsis: true,
                    render: (h, params) => {
                        return h('div', [
                            h('Tooltip', {
                                attrs: {
                                   content:  params.row.merchantName
                                },
                                props: {
                                    placement: "right"
                                }
                            },params.row.merchantName)
                        ]);
                    }
                },
                {
                    title: '联系人',
                    key: 'merchantPerson',
                    ellipsis: true,
                    render: (h, params) => {
                        return h('div', [
                            h('Tooltip', {
                                attrs: {
                                   content:  params.row.merchantPerson
                                },
                                props: {
                                    placement: "right"
                                }
                            },params.row.merchantPerson)
                        ]);
                    }
                },
                {
                    title: '联系电话',
                    key: 'merchantIphone'
                },
                {
                    title: '经营类目',
                    key: 'merchantIphone'
                },
                {
                    title: '运营商/渠道商',
                    minWidth: 30,
                    key: 'merchantIphone'
                },
                {
                    title: '归属业务员',
                    minWidth: 30,
                    key: 'merchantIphone'
                },
                {
                    title: '微信分成',
                    key: 'merchantIphone'
                },
                {
                    title: '支付宝分成',
                    minWidth: 30,
                    key: 'merchantIphone'
                },
                {
                    title: '状态',
                    key: 'merchantIphone'
                },
                {
                    title: '操作',
                    key: 'action',
                    minWidth: 90,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        console.log('详情',params);
                                    }
                                }
                            }, '详情'),
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        console.log('注销',params);
                                    }
                                }
                            }, '注销'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        console.log('启用',params);
                                    }
                                }
                            }, '启用')
                        ]);
                    }
                }
            ];
            return tableColumns;
        }
    },

    methods: {
        init () {
            this.searchData();
        },

        searchData (data, argumentObj) {
            let tthis = this;
            setTimeout(function(){
                tthis.loading = false;
            },2000);
            let obj = {
                callback: this.searchDataCallback,
                arguments: {
                    searchObj: this.searchObj,
                    pageNum: this.page.pageNum
                }
            };
            //console.log(215,obj);
            //this.$store.dispatch('searchMerchant',obj);
            this.searchDataCallback();
        },
        searchDataCallback () {
            this.page.pageTotal = 100;
            //this.page.pageNum = 2;
        },
        handleSearch () {
      
        },
        modalOk () {
            console.log(FormDynamic);
            FormDynamic.methods.getFormObj('formDynamic');
            this.$Message.info('点击确认');
        },
        modalCancel () {
            //this.$Message.info('点击取消');
        },
        changePage (num) {
            console.log(num);
            //ajax
        },
        
        //upload
        iDCardFUploadHandleSuccess(res) {
            console.log('iDCardFUploadHandleSuccess',res);
            this.formDynamic.items.iDCardF.value = 'http://scdxtest.chuangjiangx.com/bcrm/content/images/c5ef82a7.mainlogo.png';
            console.log(this.formDynamic.items);
        },

        iDCardBUploadHandleSuccess(res) {
           console.log('iDCardBUploadHandleSuccess',res);
           this.formDynamic.items.iDCardB.value = 'http://scdxtest.chuangjiangx.com/bcrm/content/images/c5ef82a7.mainlogo.png';
        },

        iDCardFUploadHandleError(error) {
            console.log('iDCardFUploadHandleError',error);
        },

        iDCardBUploadHandleError(error) {
           console.log('iDCardBUploadHandleError',error);
        }

    },
    mounted () {
        this.init();
    }
};
</script>
<style lang="less">
    .merchant-list {
        .row-top {
            margin-top: 10px;
        }
        .page-layout {
            text-align: right;
        }
    }
</style>
